<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <th:block th:include="include :: header('能见度历史记录')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <div class="form-group">


                                <input type="text" class="form-control" required id="startTime"
                                       placeholder="开始时间">

                            </div>

                        </li>
                        <li>
                            <div class="form-group">
                                <input type="text" class="form-control" required id="endTime"
                                       placeholder="结束时间">
                            </div>
                        </li>
                        <!--                        <li>-->
                        <!--                            快速选择：<select id="fastQuery">-->
                        <!--                            <option value="">最近一个小时</option>-->
                        <!--                            <option value="">最近俩个小时</option>-->
                        <!--                            <option value="">最近五个小时</option>-->
                        <!--                            <option value="">最近十个小时</option>-->
                        <!--                            <option value="">最近一天</option>-->
                        <!--                            <option value="">最近俩天</option>-->
                        <!--                        </select>-->


                        <!--                        </li>-->
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="queryData()"><i class="fa fa-search"></i>&nbsp;查询</a>
                            <a class="btn btn-warning btn-rounded btn-sm"
                               onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>

                            <a class="btn btn-info btn-rounded btn-sm"
                               onclick="goBack()"><i class="fa fa-mail-reply"></i>&nbsp;返回</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table">
                <div id="container" style="min-width:400px;height:400px"></div>

            </table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('visibility:visibility:edit')}]];
    var removeFlag = [[${@permission.hasPermi('visibility:visibility:remove')}]];
    var prefix = ctx + "visibility/visibility";
    var sim = [[${sim}]];

    $(function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#startTime',
                type: 'datetime',
                trigger: 'click'
            });
            laydate.render({
                elem: '#endTime',
                type: 'datetime',
                trigger: 'click'
            });

        });


    });

    function goBack() {
        window.location.href = "javascript:history.go(-1);"
    }

    function queryData() {

        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        if (startTime == "") {
            $.modal.msgError("请选择起始时间")
            return;
        }
        if (endTime == "") {
            $.modal.msgError("请选择结束时间")
            return;
        }
        var url = ctx + "visibility/visibility/list/" + startTime + "/" + endTime + "/" + sim;
        $.getJSON(url, function (data) {
            if (data[0].length == 0) {
                $.modal.msgWarning("暂无数据")
                return
            }
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'line'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: "能见度走势图"
                },
                subtitle: {
                    text: "sim卡号" + sim
                },
                xAxis: {
                    categories: data[0]
                },
                yAxis: {
                    title: {
                        text: '能见度(米)'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: true
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: false
                    }
                },
                series: [{
                    name: '能见度(米)',
                    data: data[1]
                }]
            });

            /*  chart = Highcharts.chart('container', {
                  chart: {
                      zoomType: 'x'
                  },
                  title: {
                      text: "能见度走势图"
                  },
                  subtitle: {
                      text: "sim卡号" + sim
                  },
                  xAxis: {
                      type: 'datetime',
                      dateTimeLabelFormats: {
                          millisecond: '%H:%M:%S.%L',
                          second: '%H:%M:%S',
                          minute: '%H:%M',
                          hour: '%H:%M',
                          day: '%m-%d',
                          week: '%m-%d',
                          month: '%Y-%m',
                          year: '%Y'
                      }
                  },
                  tooltip: {
                      dateTimeLabelFormats: {
                          millisecond: '%H:%M:%S.%L',
                          second: '%H:%M:%S',
                          minute: '%H:%M',
                          hour: '%H:%M',
                          day: '%Y-%m-%d',
                          week: '%m-%d',
                          month: '%Y-%m',
                          year: '%Y'
                      }
                  },
                  yAxis: {
                      title: {
                          text: '能见度(米)'
                      }
                  },
                  legend: {
                      enabled: false
                  },
                  plotOptions: {
                      area: {
                          fillColor: {
                              linearGradient: {
                                  x1: 0,
                                  y1: 0,
                                  x2: 0,
                                  y2: 1
                              },
                              stops: [
                                  [0, new Highcharts.getOptions().colors[0]],
                                  [1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                              ]
                          },
                          marker: {
                              radius: 2
                          },
                          lineWidth: 1,
                          states: {
                              hover: {
                                  lineWidth: 1
                              }
                          },
                          threshold: null
                      }
                  },
                  series: [{
                      type: 'area',
                      name: '能见度(米)',
                      data: data
                  }]
              });*/
        });


    }
</script>
</body>
</html>